<template>
  <el-card class="box-card">
    <div class="acea-row row-between-wrapper mb20">
      <span class="header-title" v-text="title" />
     <!-- <span class="header-time">
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-date mr5" />{{ timeTitle }}<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,i) in fromList.fromTxt" :key="i" @click.native="setTime(item.val, item.text)">{{ item.text }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span> -->
    </div>
    <echarts-from :option-data="optionData" :styles="style" height="100%" width="100%" />
  </el-card>
</template>

<script>
import echartsFrom from '@/components/echarts/index'
import { fromList } from '@/libs/select.js'

export default {
  name: 'User',
  components: { echartsFrom },
  props: {
    title: {
      type: String,
      default: ''
    },
    timeTitle: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      style: { height: '400px' },
      mlist: [],
      optionData: {},
      fromList: fromList,
    }
  },
  mounted() {
    this.getList('lately30')
  },
  methods: {
    setTime(val, text) {
        this.$emit('change-time',3,val,text)
    },

    getList(val) {

        const mlist = this._props.list

        const visitList = []
        // const newUserList = []
        // const userList = []
        const timer = []
        mlist.map(item => {
          // newUserList.push(item.new)
          // userList.push(item.total)
          visitList.push(item.visit)
          timer.push(item.day)
        })
        const seriesData = [
          // {
          //   name: '总订单',
          //   type: 'line',
          //   stack: '总订单',
          //   itemStyle: {
          //     normal: {
          //       color: '#5B8FF9',
          //       lineStyle: {
          //         color: '#5B8FF9'
          //       }
          //     }
          //   },
          //   data: userList,
          //   smooth: true
          // },
          {
            name: '已成功',
            type: 'line',
            stack: '已成功',
            itemStyle: {
              normal: {
                color: '#5AD8A6',
                lineStyle: {
                  color: '#5AD8A6'
                }
              }
            },
            data: visitList
          },
          // {
          //   name: '进行中',
          //   type: 'line',
          //   stack: '进行中',
          //   itemStyle: {
          //     normal: {
          //       color: '#5D7092',
          //       lineStyle: {
          //         color: '#5D7092'
          //       }
          //     }
          //   },
          //   data: newUserList
          // }
        ]
        this.optionData = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            x: '1px',
            y: '10px',
            //data: ['总订单', '已成功', '进行中'],
            data: ['已成功']
          },
          grid: {
            left: '0%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap:true,
              axisLine: {
                lineStyle: {
                  color: '#84878b'
                }
              },
              axisTick: {
                alignWithLabel: true,
                lineStyle: {
                  color: '#D7DDE4'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#edeeef',
                  type: "dashed",
                }
              },
              axisLabel: {
                interval: 0,
                rotate: 40,
                textStyle: {
                  color: '#7F8B9C'
                }
              },
              data: Array.from(new Set(timer))
            }
          ],
          yAxis: {
            minInterval : 1,
            boundaryGap:["0","0.1"],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#84878b'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#7F8B9C'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#edeeef',
                type: "dashed",
              }
            },
            type: 'value'
          },
          series: seriesData
        }
        this.listLoading = false
    }
  }
}
</script>

<style scoped>

</style>
